<script setup>
import tree from "@/components/mango_tree/index.vue";
import { ref, reactive } from "vue";
import mangocrud from "@/components/magnxo_crud/index.vue";
// import MangoExport from '@/plugins/export/index.js'
// import Mangoimport from '@/plugins/import/index.js'
const listdata = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
const test=()=>{
  Mangoimport.xlsx()
  //  MangoExport.excel({
  //           columns:listConfig.columns,
  //           data:tableData,
  //           title:'导出表格'
  //         }).then(res=>{
  //           ActionUtils.success("操作成功")
  //         }).catch((res)=>{
  //           ActionUtils.warning(res);
  //         })
}
const data = reactive(listdata);
const list = {
  showselection: true,
  showindex: true,
  columns: [
    {
      label: "用户ID",
      property: "id",
      formatter(row, scope, value) {
        return `id${scope.$index + 1}`;
      },
    },
    { label: "用户名", property: "userName" },
    { label: "用户邮箱", property: "userEmail" },
    { label: "用户角色", property: "job" },
    { label: "用户状态", property: "state" },
    { label: "注册时间", property: "createTime" },
    { label: "最后登录时间", property: "lastLoginTime" },
    { label: "操作", slotName: "tool" },
  ],
  pagination: {
    limit: 10,
    page: 1,
    totalKey: 0,
  },
};
let listConfig = reactive(list);
let tableData = reactive([{id:2}, {id:7}, {id:0}]);
listConfig.pagination.totalKey=tableData.length
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px"><tree :data="data" /></el-aside>
      <el-main>
        <mangocrud
          :listConfig="listConfig"
          :tableData="
            tableData.slice(
              (listConfig.pagination.page - 1) * listConfig.pagination.limit,
              listConfig.pagination.page * listConfig.pagination.limit
            )
          "
      /></el-main>
    </el-container>
  </div>
  <div class="select"></div>
</template>
<style lang="scss">
.common-layout{
  height: 100%;
  .el-container{
    height: 100%;
  }
  .mangotree{
    height: 89%;
  }
}
// .select{
//     display:flex;
//     .mango_crud{
//         flex: 1;
//     }
// }
</style>

